<template>
	<div class="dashboard-container">
		<!-- github角标 -->
		<github-corner class="github-corner" />

		<el-card shadow="never">
			<el-row justify="space-between">
				<el-col :span="18" :xs="24">
					<div class="flex h-full items-center">
						<img
							class="w-20 h-20 mr-5 rounded-full"
							:src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
						/>
						<div>
							<p>{{ greetings }}</p>
							<p class="text-sm text-gray">
								今日天气晴朗，气温在15℃至25℃之间，东南风。
							</p>
						</div>
					</div>
				</el-col>

				<el-col :span="6" :xs="24">
					<div class="flex h-full items-center justify-around">
						<el-statistic
							v-for="item in statisticData"
							:key="item.key"
							:value="item.value"
						>
							<template #title>
								<div class="flex items-center">
									<svg-icon :icon-class="item.iconClass" size="20px" />
									<span class="text-[16px] ml-1">{{ item.title }}</span>
								</div>
							</template>
							<template v-if="item.suffix" #suffix>/100</template>
						</el-statistic>
					</div>
				</el-col>
			</el-row>
		</el-card>

		<!-- 数据卡片 -->
		<el-row :gutter="10" class="mt-3">
			<el-col
				:xs="24"
				:sm="12"
				:lg="6"
				v-for="(item, index) in cardData"
				:key="index"
			>
				<el-card shadow="never">
					<template #header>
						<div class="flex items-center justify-between">
							<span class="text-[var(--el-text-color-secondary)]">{{
								item.title
							}}</span>
							<el-tag :type="item.tagType">
								{{ item.tagText }}
							</el-tag>
						</div>
					</template>

					<div class="flex items-center justify-between mt-5">
						<div class="text-lg text-right">
							{{ Math.round(item.count) }}
						</div>
						<svg-icon :icon-class="item.iconClass" size="2em" />
					</div>

					<div
						class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
					>
						<span> {{ item.dataDesc }} </span>
						<span> {{ Math.round(item.count * 15) }} </span>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- Echarts 图表 -->
		<el-row :gutter="10" class="mt-3">
			<el-col
				:xs="24"
				:sm="12"
				:lg="8"
				class="mb-2"
				v-for="item in chartData"
				:key="item"
			>
				<component
					:is="chartComponent(item)"
					:id="item"
					height="400px"
					width="100%"
					class="bg-[var(--el-bg-color-overlay)]"
				/>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import type { EpPropMergeType } from 'element-plus/es/utils/vue/props/types'
defineOptions({
	name: 'Dashboard',
	inheritAttrs: false
})

import { useUserStore } from '@/store/modules/user'
import { useTransition, TransitionPresets } from '@vueuse/core'

const userStore = useUserStore()
const date: Date = new Date()

const greetings = computed(() => {
	const hours = date.getHours()
	if (hours >= 6 && hours < 8) {
		return '晨起披衣出草堂，轩窗已自喜微凉🌅！'
	} else if (hours >= 8 && hours < 12) {
		return '上午好，' + userStore.user.nickname + '！'
	} else if (hours >= 12 && hours < 18) {
		return '下午好，' + userStore.user.nickname + '！'
	} else if (hours >= 18 && hours < 24) {
		return '晚上好，' + userStore.user.nickname + '！'
	} else {
		return '偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！'
	}
})

const duration = 5000

// 销售额
const amount = ref(0)
const amountOutput = useTransition(amount, {
	duration: duration,
	transition: TransitionPresets.easeOutExpo
})
amount.value = 2000

// 访客数
const visitCount = ref(0)
const visitCountOutput = useTransition(visitCount, {
	duration: duration,
	transition: TransitionPresets.easeOutExpo
})
visitCount.value = 2000

// IP数
const dauCount = ref(0)
const dauCountOutput = useTransition(dauCount, {
	duration: duration,
	transition: TransitionPresets.easeOutExpo
})
dauCount.value = 2000

// 订单量
const orderCount = ref(0)
const orderCountOutput = useTransition(orderCount, {
	duration: duration,
	transition: TransitionPresets.easeOutExpo
})
orderCount.value = 2000

// 右上角数量
const statisticData = ref([
	{
		value: 99,
		iconClass: 'message',
		title: '消息',
		key: 'message'
	},
	{
		value: 50,
		iconClass: 'todolist',
		title: '待办',
		suffix: '/100',
		key: 'upcoming'
	},
	{
		value: 10,
		iconClass: 'project',
		title: '项目',
		key: 'project'
	}
])

interface CardProp {
	title: string
	tagType: EpPropMergeType<
		StringConstructor,
		'primary' | 'success' | 'info' | 'warning' | 'danger',
		unknown
	>
	tagText: string
	count: any
	dataDesc: string
	iconClass: string
}
// 卡片数量
const cardData = ref<CardProp[]>([
	{
		title: '访客数',
		tagType: 'success',
		tagText: '日',
		count: visitCountOutput,
		dataDesc: '总访客数',
		iconClass: 'visit'
	},
	{
		title: 'IP数',
		tagType: 'success',
		tagText: '日',
		count: dauCountOutput,
		dataDesc: '总IP数',
		iconClass: 'ip'
	},
	{
		title: '销售额',
		tagType: 'primary',
		tagText: '月',
		count: amountOutput,
		dataDesc: '总IP数',
		iconClass: 'money'
	},
	{
		title: '订单量',
		tagType: 'danger',
		tagText: '季',
		count: orderCountOutput,
		dataDesc: '总订单量',
		iconClass: 'order'
	}
])
// 图表数据
const chartData = ref(['BarChart', 'PieChart', 'RadarChart'])
const chartComponent = (item: string) => {
	return defineAsyncComponent(() => import(`./components/${item}.vue`))
}
</script>

<style lang="scss" scoped>
.dashboard-container {
	position: relative;
	padding: 24px;

	.user-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.github-corner {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		border: 0;
	}

	.data-box {
		display: flex;
		justify-content: space-between;
		padding: 20px;
		font-weight: bold;
		color: var(--el-text-color-regular);
		background: var(--el-bg-color-overlay);
		border-color: var(--el-border-color);
		box-shadow: var(--el-box-shadow-dark);
	}

	.svg-icon {
		fill: currentcolor !important;
	}
}
</style>
